<template>
	<view class="float-tab">
		<navigator v-for="(item,index) in tabs" :key="index" class="tab-img"
			:style="{transform: `translateY(${showTabs ? -(index + 1) * height : 0}rpx)`}" hover-class="none"
			:open-type="item.linkType" :url="item.url">
			<image class="tab-icon" :src="item.icon" />
		</navigator>
		<image style="z-index: 99" :style="{transform: `rotateZ(${showTabs ? 135 : 0}deg)`}" class="tab-img"
			src="/static/images/icon_float_more.png" @click="onChange" />
	</view>
</template>

<script>
	export default {
		name: "float-tab",
		data() {
			return {
				showTabs: false,
				height: 96,
				tabs: [{
					icon: '/static/images/icon_float_cart.png',
					url: '/pages/shop_cart/shop_cart',
					linkType: 'reLaunch'
				}, {
					icon: '/static/images/icon_float_help.png',
					url: '/bundle/pages/service/service',
					linkType: 'navigate'
				}, {
					icon: '/static/images/icon_float_home.png',
					url: '/pages/index/index',
					linkType: 'reLaunch'
				}]
			};
		},
		methods: {
			onChange() {
				this.showTabs = !this.showTabs
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss">
	.float-tab {
		position: fixed;
		right: 16rpx;
		bottom: 200rpx;
		width: 96rpx;
		height: 96rpx;
		z-index: 777;

		.tab-img {
			width: 100%;
			height: 100%;
			position: absolute;
			transition: all .5s;

			.tab-icon {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
